import { Text, View } from '@tarojs/components';
import Navbar from '@/components/Navbar';
import { TextArea, Uploader } from '@nutui/nutui-react-taro';
import { useState } from 'react';
import './index.less';
import ButtonComp from '@/components/Button';
import { navigateBack, showToast } from '@tarojs/taro';
import ImageConstant from '@/constant/ImageConstant';
import ComplaintBusiness from '@/business/ComplaintBusiness';
import authStore from '@/stores/AuthStore';
import CodeConstant from '@/constant/CodeConstant';
import userStore from '@/stores/UserStore';
import AuthConstant from '@/constant/AuthConstant';
import BusinessConstant from '@/constant/BusinessConstant';

const Complaint = () => {
  const [reason, setReason] = useState('');
  const [imgList, setImgList] = useState<Array<string>>([]);
  const [video, setVideo] = useState('');

  /**
   * 投诉图片上传成功回调
   */
  const complaintImgUploadSuccess = ({ responseText }) => {
    const res: any = JSON.parse(responseText.data);
    if (res.code !== CodeConstant.SUCCESS) {
      showToast({ title: '图片上传失败！', icon: 'error' });
      return;
    }
    showToast({ title: '图片上传成功！', icon: 'success' });
    setImgList((imgList) => [...imgList, res.data]);
  };

  /**
   * 投诉视频上传成功回调
   */
  const complaintVideoUploadSuccess = ({ responseText }) => {
    const res: any = JSON.parse(responseText.data);
    if (res.code !== CodeConstant.SUCCESS) {
      showToast({ title: '视频上传失败！', icon: 'error' });
      return;
    }
    showToast({ title: '视频上传成功！', icon: 'success' });
    setVideo(res.data);
  };

  /**
   * 提交投诉请求
   */
  const submitComplaint = async () => {
    if (!reason) {
      showToast({
        title: '问题描述不允许为空！',
        icon: 'error',
      });
    }
    let identity = -1;
    if (authStore.identity === AuthConstant.TENANT) {
      identity = BusinessConstant.COMPLAINT_TENANT;
    } else if (authStore.identity === AuthConstant.LANDLORD) {
      identity = BusinessConstant.COMPLAINT_LANDLORD;
    }
    await ComplaintBusiness.addComplaint({
      reason: reason,
      image: JSON.stringify(imgList),
      video: video,
      complaintId: userStore.user?.id,
      phone: userStore.user?.phone,
      identity,
    });
    navigateBack();
    showToast({
      title: '提交成功',
      icon: 'success',
    });
  };

  return (
    <Navbar
      mode='back'
      title='投诉建议填写'
      bgColor='var(--mini-first)'
    >
      <View className='complaint-container'>
        <View className='reason-text-wrap'>
          <Text style={{ whiteSpace: 'nowrap' }}>问题描述：</Text>
          <TextArea
            className='reason-textarea'
            value={reason}
            onChange={(val) => setReason(val)}
            showCount
            placeholder='请输入遇到的问题'
          />
        </View>
        <View className='reason-img-wrap'>
          <Text>问题图片：</Text>
          <Uploader
            maxCount={4}
            multiple={true}
            url={ImageConstant.UPLOAD_IMG_VIDEO}
            headers={{ authorization: authStore.token }}
            onSuccess={complaintImgUploadSuccess}
          />
        </View>
        <View className='reason-video-wrap'>
          <Text>问题视频：</Text>
          <Uploader
            sourceType={['camera']}
            maxDuration={5}
            url={ImageConstant.UPLOAD_IMG_VIDEO}
            previewUrl={`${ImageConstant.SERVER_ROOT}${ImageConstant.DEFAULT_VIDEO_COVER_IMG}`}
            headers={{ authorization: authStore.token }}
            onSuccess={complaintVideoUploadSuccess}
          />
        </View>
        <ButtonComp
          title='提交'
          bgColor='var(--mini-first)'
          className='submit-btn'
          size='large'
          onClick={submitComplaint}
        />
      </View>
    </Navbar>
  );
};

export default Complaint;
